<template>
    <div class="fixedBox">
        <div @click="handelHeaderClick" class="header">

            <h2 class='title hidden-xs-only'>
                             <i class='fa fa-home '></i>
                阿灿的首页 </h2>
            <button class="menuBtn hidden-sm-and-up" @click.stop="btnOpenAsideBar">
                <span class="fa fa-bars"></span>
            </button>
            <div class='search-box'>
                <input v-model="keyWord" type="text" placeholder='点击搜索你想要的'>
                <button @click="searchBlog" ><span class='fa fa-search'></span></button>
            </div>
            <div class='func-box'>
                <span class='fa fa-envelope-open'></span>
                <span class='fa fa-user-circle-o' @click="()=>{this.$router.push('/login')}"> </span>
            </div>

        </div>
    </div>

</template>

<script>
import "element-ui/lib/theme-chalk/display.css";


export default {
    name: 'MyHeader',
    data(){
      return{
        keyWord:'',


      }
    },
    methods:{
        btnOpenAsideBar(){
            this.$EventBus.$emit('AsideOpen','BtnClick')
            console.log('btn点击')

        },
        handelHeaderClick() {
            this.$EventBus.$emit('AsideOpen','HeaderClick')
            console.log('Header点击')


        },
      searchBlog(){
        //调用搜索
        console.log('调用搜索')


        this.$EventBus.$emit('searchBlog',this.keyWord)
        this.keyWord = ''
      }


}
    }


</script>

<style scoped>
.fixedBox{
    position: sticky;
    top: 0;
    /*width: 75rem;*/
        z-index: 99;


}

    .header{
        /*width: 75rem;*/
        display: flex;
        justify-content: space-between;
        height: 3.125rem;
        align-items:center;
        box-shadow: 0 1px 5px 1px rgb(0 0 0 / 5%);
        background-color: #f9f9f9;




    }
    .title{
       
        color: #58666e;
        /*width: 8.125rem;*/
        font-size:1.1875rem;
        padding-left:1.25rem;
        /* justify-content:center; */
    }
    .search-box{
        height: 1.875rem;
        color: #58666e;
        font-size:0;
        display: flex;
        
        
    }
    .search-box input
    {
         -webkit-appearance:none !important;
        line-height: 1.875rem;
        padding:0 0 0 0.625rem;

        margin: 0;     
        outline:none;    
        border:solid 0.0938rem #fff ;
        -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
        box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
        border-radius: 0.9375rem 0 0 0.9375rem;
        transition: 0.5s;
       
    }
    .search-box button 
    {
        color: #58666e;
        border:solid 0.0938rem #fff ;
       -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
        box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
        cursor: pointer;
        line-height: 1.875rem;
        padding:0 0.625rem;
        /* border: none; */
        margin: 0; 
        border-radius: 0 0.9375rem  0.9375rem 0;
        background-color: #fff;
        
        
    }
    .search-box input:focus{
        border-color: #c4d7f2;
    }
    .search-box input:hover{
        background-color: #e0e6ed;
        cursor:pointer;
    }
    .func-box{
        display: flex;
        justify-content: space-between;
    }
    .func-box span{
        color: #58666e;
        padding:  0 0.8125rem ;
        display:inline-block;
        height: 3.125rem;
        line-height:3.125rem;
        transition: 0.5s;
    }
    .func-box span:hover{
        background-color: #ececec;
        cursor:pointer;
    }
    .title:hover{
        cursor:pointer;
    }
    .menuBtn{
        padding: 0.625rem 1.0625rem;
        font-size: 1rem;
        line-height: 1.875rem;
        color: inherit;
        -webkit-tap-highlight-color: transparent;
    }

</style>